<template>
  <div class="bg-level-1">
    <Header :isGoBack="false">
      <template v-slot:right>
        <span class="btn-bg ml20">
          <el-button class="button button-bg-second" @click="goNotebookTest"
            >错题巩固</el-button
          >
        </span>
        <div class="btn" @click="goStudyIndex">返回学习中心</div>
      </template>
    </Header>
    <div class="w1200 wrong-question-list">
      <!-- <BreadcrumbBook :classInfo="classInfo" title="错题库"></BreadcrumbBook> -->
      <div class="wrong-question-banner">
        <h4 class="title">系统错题</h4>
        <el-form
          :model="wrongForm"
          :inline="true"
          class="question-screen"
          style="    display: flex;
    flex-direction: column;
    align-content: flex-start;"
        >
          <!-- <el-form-item>
                        <el-date-picker v-model="wrongForm.checkDate" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                            @change="changeCondition"></el-date-picker>
                    </el-form-item> -->
          <el-form-item
            v-if="$route.query.type == 0"
            label="错题模块:"
            label-width="80px"
          >
            <el-select
              v-model="wrongForm.source"
              placeholder="请选择错题模块"
              @change="changeCondition"
              clearable
            >
              <el-option :value="null" label="全部"></el-option>
              <el-option :value="0" label="随堂练习"></el-option>
              <el-option :value="1" label="闯关测试"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="错题类型:" label-width="80px">
            <el-select
              v-model="wrongForm.article_question_type"
              placeholder="请选择错题类型"
              @change="changeCondition"
              clearable
            >
              <el-option :value="null" label="全部"></el-option>
              <el-option :value="0" label="单项选择"></el-option>
              <el-option :value="1" label="填空"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围:" label-width="80px">
            <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
            <el-date-picker
              @change="changePickerData"
              value-format="timestamp"
              v-model="pickerData"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="w1200 question-test-paper question-fixed"
        style="margin-top:10px;"
        v-if="
          (questionList[0].question_list &&
            questionList[0].question_list.length > 0) ||
            (questionList[1].question_list &&
              questionList[1].question_list.length > 0)
        "
      >
        <div class="general-test reading-question">
          <div
            class="question-type-container"
            v-for="(quetionType, index) in questionList"
            :key="quetionType.type"
          >
            <div class="type-title">
              <span>{{ index + 1 }}.</span>
              {{ quetionType.type == 1 ? "单项选择" : "填空题" }}
              <span>
                <!-- <span class="reminder-text">(提示文字)</span> -->
              </span>
            </div>
            <!-- question-list -->
            <ul class="reading-question-list">
              <li
                class="question"
                :class="
                  question.allIndex == nowIndex
                    ? 'question-ing '
                    : question.studentAnswer
                    ? 'checked-question'
                    : ''
                "
                v-for="(question, index2) in quetionType.question_list"
                :key="question.questionId + '' + question.answerType"
              >
                <i
                  v-if="question.isAnswer && quetionType.type == 1"
                  @click="
                    readCollect(
                      question.questionId,
                      index2,
                      question,
                      quetionType.type
                    )
                  "
                  :class="[
                    defaultStart[index2]
                      ? 'el-icon-star-on'
                      : 'el-icon-star-off',
                  ]"
                  class="start"
                  style="color: rgb(241, 209, 149); cursor: pointer;font-size: 20px;"
                ></i>
                <i
                  v-if="question.isAnswer && quetionType.type != 1"
                  @click="
                    readCollect(
                      question.questionId,
                      index2,
                      question,
                      quetionType.type
                    )
                  "
                  :class="[
                    typesStart[index2] ? 'el-icon-star-on' : 'el-icon-star-off',
                  ]"
                  class="start"
                  style="color: rgb(241, 209, 149); cursor: pointer;font-size: 20px;"
                ></i>
                <Question
                  :isClick="false"
                  :nowIndex="index2 + 1"
                  :question="question"
                  :isAnswer="paperData.isAnswer"
                  :ref="`question-${index}-${index2}`"
                  :classify="5"
                ></Question>
              </li>
            </ul>
            <div
              style="text-align: right;"
              v-if="
                wrongQuestionData.total > 15 && questionList.length == index + 1
              "
            >
              <el-pagination
                @current-change="changePageNum"
                :current-page="wrongForm.page_num"
                :page-size="15"
                layout="total,prev, pager, next"
                :total="wrongQuestionData.total"
              ></el-pagination>
            </div>
          </div>
        </div>
        <!-- wrong-question-pagination -->
      </div>
      <div class="wrong-question-no no-container" v-else>
        <img src="@/assets/img/no-question.png" alt="" />
        <p class="no-text">暂无错题</p>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Question from "@/components/Question.vue";
import { mistakesSearch } from "@/api/index.js";
import { throttle1 } from "@/utils/utils";
export default {
  data() {
    return {
      pickerData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      paperData: {},
      classInfo: {},
      wrongForm: {
        book_id: null,
        source: null,
        article_question_type: null,
        page_size: 15,
        page_num: 1,
        start_time: null,
        end_time: null,
      },
      showPagination: true,
      wrongQuestionData: {
        total: 0,
      },
      offsetTop: 0,
      numberFixed: false,
      wrongQuestionList: [],
      questionList: [[], []],
    };
  },
  computed: {},
  methods: {
    changePickerData: throttle1(function() {
      this.wrongForm.start_time = this.pickerData[0];
      this.wrongForm.end_time = this.pickerData[1];
      this.wrongForm.page_num = 1;
      this.mistakesSearch();
    }, 500),
    goNotebookTest() {
      this.$router.push({
        name: "notebookTest",
        query: {
          ...this.wrongForm,
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: this.$route.query.type==0?"questionStudyCenter":"grammar",
      });
    },
    changeCondition: throttle1(function() {
      this.wrongForm.page_num = 1;
      this.mistakesSearch();
    }, 500),
    changePageNum(value) {
      this.wrongForm.page_num = value;
      this.mistakesSearch();
    },
    async mistakesSearch() {
      (this.questionList = [[], []]), (this.paperData = {});
      const res = await mistakesSearch(this.wrongForm);
      this.wrongQuestionData.total = res.data.total_num;
      console.log(this.wrongQuestionData.total);

      let eng_question_form_vo_list = [
        {
          order: 1,
          type: 1, //单选
          question_list: [],
        },
        {
          order: 2,
          type: 7, //填空
          question_list: [],
        },
      ];
      res.data.list.forEach((item) => {
        if (item.question_type == 0) {
          //单选
          eng_question_form_vo_list[0].question_list.push({
            id: item.id,
            option_list: item.article_question_answer_info_list[0].answers,
            stu_answer_list: [],
            title: item.article_question_answer_info_list[0].title,
            type: 1,
            parse: item.article_question_answer_info_list[0].parse,
          });
        } else if (item.question_type == 1) {
          eng_question_form_vo_list[1].question_list.push({
            id: item.id,
            option_list: item.article_question_answer_info_list[0].answers,
            stu_answer_list: [],
            title: item.article_question_answer_info_list[0].title,
            type: 7,
            parse: item.article_question_answer_info_list[0].parse,
          });
        }
      });
      this.initQuestions(eng_question_form_vo_list);
      console.log(this.paperData, 151);
      //   this.wrongQuestionList = res.data.list;
      //   console.log(res, "res");
    },
    initQuestions(list) {
      list.forEach((questionTypeList) => {
        questionTypeList.question_list.forEach((question) => {
          let newTitle = question.title;
          question.oldTitle = question.title;
          question.inputNum = 0;
          // if (questionTypeList.type == 7) {
          //   let index = 1;
          //   let pos = newTitle.indexOf("_____");
          //   while (pos !== -1) {
          //     newTitle = newTitle.replace(
          //       /_{5}/,
          //       ` <input class='question-input' autocomplete="off" id='input-${question.id}-${index}' onpaste = "return false";></input> `
          //     );
          //     index++;
          //     pos = newTitle.indexOf("_____");
          //   }
          //   question.inputNum = index - 1;
          // }
          question.questionId = question.id;
          question.title = newTitle;
          question.answerType = question.type == 1 ? 1 : 7;
          question.answerList = question.option_list.map((item) => {
            return {
              answer_id: item.id,
              answer: item.answer,
            };
          });
          question.studentAnswer = [];
          // question.inputNum = question.inputNum;
        });
      });
      this.paperData.eng_question_form_vo_list = list.sort((a, b) => {
        return a.type - b.type;
      });
      // this.paperData = res.data;
      this.paperData.isAnswer = false;
      this.questionList = this.paperData.eng_question_form_vo_list.filter(
        (item) => item.question_list.length
      );
      console.log(this.questionList, "this.questionList");
    },
    //滚动监听
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.getElementById("app").scrollTop;
      if (scrollTop > this.offsetTop) {
        let timer = setTimeout(() => {
          this.numberFixed = true;
          clearTimeout(timer);
        }, 5);
      } else {
        let timer = setTimeout(() => {
          this.numberFixed = false;
          clearTimeout(timer);
        }, 5);
      }
    },
    async initPage() {
      this.classInfo = JSON.parse(localStorage.getItem("bookData"));
      this.wrongForm.book_id = this.classInfo.book_id;
    },
  },
  created() {
    this.wrongForm.type = this.$route.query.type;
    this.initPage();
    this.mistakesSearch();
  },
  mounted() {
    document
      .getElementById("app")
      .addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {},
  components: {
    Header,
    Question,
    //   QuestionRecord,
    //   KnowledgeDialog,
  },
};
</script>
<style scoped>
/deep/.wrong-question-list .wrong-question-banner .el-form .el-form-item {
  margin-bottom: 0px;
}
</style>
